<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>思维册-内容浏览</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" >
    <meta http-equiv="description" content="This is my page">

	<!-- First, add jQuery (and jQuery UI if using custom easing or animation -->
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    
    <!-- Second, add the Timer and Easing plugins -->
    <script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    
    <!-- Third, add the GalleryView Javascript and CSS files -->
    <script type="text/javascript" src="js/jquery.galleryview-3.0-dev.js"></script>
    <link type="text/css" rel="stylesheet" href="css/jquery.galleryview-3.0-dev.css" />
    
    <!-- Lastly, call the galleryView() function on your unordered list(s) -->
    <script type="text/javascript">
        $(function(){
          $('#myGallery').galleryView({
                transition_speed: 2000, 		//INT - duration of panel/frame transition (in milliseconds)
                transition_interval: 4000, 		//INT - delay between panel/frame transitions (in milliseconds)
                easing: 'swing', 				//STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
                show_panels: true, 				//BOOLEAN - flag to show or hide panel portion of gallery
                show_panel_nav: false, 			//BOOLEAN - flag to show or hide panel navigation buttons
                enable_overlays: true, 			//BOOLEAN - flag to show or hide panel overlays
                                      
                panel_width: 710, 				//INT - width of gallery panel (in pixels)
                panel_height: 411, 				//INT - height of gallery panel (in pixels)
                panel_animation: 'slide', 		//STRING - animation method for panel transitions (crossfade,fade,slide,none)
                panel_scale: 'crop', 			//STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, fit = scale image and preserve original aspect ratio)
                overlay_position: 'bottom', 	//STRING - position of panel overlay (bottom, top)
                pan_images: true,				//BOOLEAN - flag to allow user to grab/drag oversized images within gallery
                pan_style: 'drag',				//STRING - panning method (drag = user clicks and drags image to pan, track = image automatically pans based on mouse position
                pan_smoothness: 15,				//INT - determines smoothness of tracking pan animation (higher number = smoother)
                start_frame: 1, 				//INT - index of panel/frame to show first when gallery loads
                show_filmstrip: true, 			//BOOLEAN - flag to show or hide filmstrip portion of gallery
                show_filmstrip_nav: true, 		//BOOLEAN - flag indicating whether to display navigation buttons
                enable_slideshow: false,			//BOOLEAN - flag indicating whether to display slideshow play/pause button
                autoplay: false,				//BOOLEAN - flag to start slideshow on gallery load
                show_captions: true, 			//BOOLEAN - flag to show or hide frame captions	
                filmstrip_size: 5, 				//INT - number of frames to show in filmstrip-only gallery
                filmstrip_style: 'scroll', 		//STRING - type of filmstrip to use (scroll = display one line of frames, scroll filmstrip if necessary, showall = display multiple rows of frames if necessary)
                filmstrip_position: 'bottom', 	//STRING - position of filmstrip within gallery (bottom, top, left, right)
                frame_width: 110, 				//INT - width of filmstrip frames (in pixels)
                frame_height: 80, 				//INT - width of filmstrip frames (in pixels)
                frame_opacity: 0.5, 			//FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
                frame_scale: 'crop', 			//STRING - cropping option for filmstrip images (same as above)
                frame_gap: 5, 					//INT - spacing between frames within filmstrip (in pixels)
                show_infobar: false,				//BOOLEAN - flag to show or hide infobar
                infobar_opacity: 1				//FLOAT - transparency for info bar
                });
          });
        </script>
    
    <style type="text/css">
        body{
            background:#333;
            background-position:top center;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:12px;
            margin: 2em; 
        }
        #ipad{
            background:url(images/ipad.png);
            margin:5px 120px;
            width:864px;
            height:660px;
        }
        #ipad-screen{
			height: 520px;
			width: 713px;
			position: absolute;
			top: 94px;
			left: 220px;
			right: 220px;
			bottom: 100px;
        }
    	#homeBtn {
			position: absolute;
			height: 50px;
			width: 50px;
			top: 320px;
			right: 100px;
			bottom: 340px;
			left: 945px;
		}
    </style>
  </head>
  
 <body>
 
 <div id="ipad">
    
    <div id="homeBtn"></div>
<!--************************screen start*******************************-->
        
    <div id="ipad-screen">
      <ul id="myGallery">
      <s:iterator value="listPic" var="pic">
		<s:if test="type =='content'">
         <li><img data-frame="${httpImage}/${fileDir}?<%=System.currentTimeMillis()%>" src="${httpImage}/${fileDir}?<%=System.currentTimeMillis()%>" title="" data-description="" />
       	</s:if>
	  </s:iterator>
       </ul>
     </div>
<!--************************screen end*******************************--> 
    </div>
</body>
</html>
